<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.oneContain {
  width: calc(100% - 10px);
  height: 400px;
}

</style>
<template>
  <div>
    <Modal v-model="chartModal.show" fullscreen :title="property.name" @on-visible-change="visibleChange" @on-cancel="cancel()">
      <Card dis-hover>
        <!-- <p slot="title">{{property.name}}</p> -->
        <div class="btnContain"> <span>最近</span>
          <RadioGroup v-model="btnGroup.time" type="button">
            <Radio label="5hour" @click.native="timeClick()">5小时</Radio>
            <Radio label="1day" @click.native="timeClick()">1天</Radio>
            <Radio label="1week" @click.native="timeClick()">1周</Radio>
          </RadioGroup>
          <ButtonGroup>
            <Button :type="btnGroup.type.flow?'primary':'default'" :ghost="btnGroup.type.flow" @click="typeClick('flow')">流量</Button>
            <Button :type="btnGroup.type.pressure?'primary':'default'" :ghost="btnGroup.type.pressure" @click="typeClick('pressure')">压力</Button>
            <Button :type="btnGroup.type.speed?'primary':'default'" :ghost="btnGroup.type.speed" @click="typeClick('speed')">流速</Button>
          </ButtonGroup>
          <DatePicker :value="dateRangeValue" format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placement="bottom-end" placeholder="请选择日期范围" style="width: 300px"></DatePicker>
          <RadioGroup v-model="btnGroup.unit" type="button">
            <Radio label="year">年</Radio>
            <Radio label="mounth">月</Radio>
            <Radio label="day">日</Radio>
          </RadioGroup>
        </div>
        <div :id="divId" class="oneContain"></div>
      </Card>
    </Modal>
  </div>
</template>
<script>
export default {
  props: {
    property: Object,
    show: Boolean,
    did: Number
  },
  created: function () {
    console.log('123123123123')
    // {"id":51,"dataLen":2,"isGet":1,"name":"DI1","unit":null,"propertyType":100,"valueAddr":100,"value":"0.00","warnDown":99,"warnUp":0}
    console.log(this.property)
  },
  data: function () {
    const num = (rule, value, callback) => {
      let isNum = /^\+?[1-9][0-9]*$/.test(value)
      if (value === '' || value === undefined || !isNum) {
        callback(new Error('请输入数字！'))
      } else {
        callback()
      }
    }
    return {
      dateRangeValue: ['2018-01-01', '2018-02-15'],
      chartModal: {
        show: false
      },
      btnGroup: {
        time: '5hour',
        type: {
          flow: true,
          pressure: false,
          speed: false
        },
        daterange: []
      },
      oneChart: null
    }
  },
  watch: {
    show: function (newValue, oldValue) {
      if (newValue) {
        this.chartModal.show = true
        this.initChart()
      } else {
        this.chartModal.show = false
      }
    },
    daterange: function (newValue, oldValue) {
      if (String(newValue) !== String(newValue)) {
        this.query()
      }
    }
  },
  computed: {
    divId: function () {
      return 'id' + this.did
    }
  },
  mounted: function () {},
  destroyed: function () {
    window.onresize = null
  },
  methods: {
    initChart: function () {
      let self = this
      this.$nextTick(() => {
        let id = this.divId
        self.oneChart = self.$echarts.init(document.getElementById(id))
        self.query()
        window.onresize = function () {
          self.oneChart.resize()
        }
      })
    },
    visibleChange: function (b) {
      console.log('b-----------', b)
      if (b) {
        console.log('b-----------', b)
      }
    },
    cancel: function () {
      this.$emit('close', false)
    },
    modalShow: function () {
      this.chartModal.show = true
    },
    modalHide: function () {
      this.chartModal.show = false
    },
    timeClick: function () {
      this.query()
    },
    typeClick: function (field) {
      this.btnGroup.type[field] = !this.btnGroup.type[field]
      this.query()
    },
    query: function () {
      // let self = this
      // let postData = { id: this.divId }
      // window.myapi.iotDevRealData(postData).then((res) => {
      //   console.log('chart------------------query-----------' + this.divId)
      //   console.log(res)
      // }).catch((error) => {
      //   if (error) {
      //     let msg = 'error'
      //     self.$Message.error(msg)
      //   }
      // })
      // test
      let arr = []
      for (let i = 0; i < 7; i++) {
        let num = parseInt(100 * Math.random())
        arr.push(num)
      }
      let chartData = {
        yaxises: [
          [120, 132, 101, 134, 90, 230, 210], arr
        ],
        xaxis: ['x1', 'x2', 'x3', 'x4', 'x5', 'x6', 'x7']
      }
      this.oneInit(chartData)
    },
    oneInit: function (chartData) {
      let self = this
      if (!self.oneChart) {
        let id = this.divId
        self.oneChart = self.$echarts.init(document.getElementById(id))
      }
      self.oneChart.showLoading({ text: '' })
      let seriesData = []
      for (let i = 0; i < chartData.yaxises.length; i++) {
        let obj = {
          name: '数据' + (i + 1),
          type: 'line',
          smooth: true,
          data: chartData.yaxises[i],
          itemStyle: {
            normal: {
              color: self.randomHexColor()
            }
          }
        }
        seriesData.push(obj)
      }
      let option = {
        title: {
          text: '标题123',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          },
          right: 40
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: chartData.xaxis
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        }],
        series: seriesData
      }
      // 绘制图表
      self.oneChart.setOption(option)
      self.oneChart.hideLoading()
    },
    // 随机生成十六进制颜色
    randomHexColor: function () {
      var hex = Math.floor(Math.random() * 16777216).toString(16) // 生成ffffff以内16进制数
      while (hex.length < 6) { // while循环判断hex位数，少于6位前面加0凑够6位
        hex = '0' + hex
      }
      return '#' + hex // 返回‘#'开头16进制颜色
    }
  }
}

</script>
